// Copyright 2009 Kensaku KOMATSU.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//   http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.


var RotateClock = function(id, img_uris, senario) {
	if(typeof(id) == 'undefined' || typeof(id) != 'string') {
		alert('id not specified!!');
		return false;
	}

	
	if(typeof(img_uris) == 'undefined' || typeof(img_uris) != 'object' || img_uris.length == 0) {
		alert('img_uris error');
		return false;
	}

	if(typeof(senario) == 'undefined' || typeof(senario) != 'object' || senario.length == 0) {
		senario = null;
	}


	this.initialize(id, img_uris, senario);
};


RotateClock.prototype = {
	version: 1.1,
	imgs: [],
//	img_uris: [],
	senario: [],
	_senario: [
		{	cont : 1,
			pat : 
				[1
		]},
		{	cont : 1,
			pat : 
				[1,1,
				 1,1
		]},
		{	cont : 1,
			pat : 
				[1,1,1,
				 1,1,1,
				 1,1,1
		]},
		{	cont : 1,
			pat : 
				[1,1,1,1,
				 1,1,1,1,
				 1,1,1,1,
				 1,1,1,1
		]},
		{	cont : 2,
			pat : 
				[1,0,0,0,0,
				 1,0,1,1,0,
				 1,1,0,0,1,
				 1,0,0,0,1,
				 1,0,0,0,1
		]},
		{	cont : 2,
			pat : 
				[0,1,0,0,0,
				 1,1,1,1,1,
				 0,1,0,0,0,
				 0,1,0,0,0,
				 0,0,1,1,1
		]},
		{	cont : 2,
			pat : 
				[0,1,0,1,0,
				 1,0,1,0,1,
				 1,0,1,0,1,
				 1,0,1,0,1,
				 1,0,0,0,1
		]},
		{	cont : 2,
			pat : 
				[0,1,0,0,0,
				 0,1,0,0,0,
				 0,1,0,0,0,
				 0,1,0,0,0,
				 0,0,1,0,0
		]},
		{	cont : 4,
			pat : 
				[1,1,1,1,1,
				 1,0,0,0,0,
				 1,1,1,1,0,
				 0,0,0,0,1,
				 1,1,1,1,0
		]},
		{	cont : 2,
			pat : 
				[1,1,1,1,1,
				 1,1,1,1,1,
				 1,1,1,1,1,
				 1,1,1,1,1,
				 1,1,1,1,1
		]},
		{	cont : 2,
			pat : 
				[0,0,0,0,0,
				 0,1,0,1,0,
				 0,0,0,0,0,
				 1,0,0,0,1,
				 0,1,1,1,0
		]},
		{	cont : 2,
			pat : 
				[1,1,1,1,1,
				 1,1,1,1,1,
				 1,1,1,1,1,
				 1,1,1,1,1,
				 1,1,1,1,1
		]},
		{	cont : 2,
			pat : 
				[0,0,0,0,0,
				 0,1,0,1,0,
				 0,0,0,0,0,
				 1,0,0,0,1,
				 0,1,1,1,0
		]},
		{	cont : 1,
			pat : 
				[1
		]},
		{	cont : 1,
			pat : 
				[1,1,
				 1,1
		]},
		{	cont : 1,
			pat : 
				[1
		]},
		{	cont : 1,
			pat : 
				[0,0,0,0,0,
				 0,1,0,1,0,
				 0,0,0,0,0,
				 1,0,0,0,1,
				 0,1,1,1,0
		]},
		{	cont : 1,
			pat : 
				[1,0,1,0,1,
				 0,1,0,1,0,
				 1,0,1,0,1,
				 0,1,0,1,0,
				 1,0,1,0,1
		]},
		{	cont : 1,
			pat : 
				[0,1,0,1,0,
				 1,0,1,0,1,
				 0,1,0,1,0,
				 1,0,1,0,1,
				 0,1,0,1,0
		]},
		{	cont : 1,
			pat : 
				[1,0,1,0,1,
				 0,1,0,1,0,
				 1,0,1,0,1,
				 0,1,0,1,0,
				 1,0,1,0,1
		]},
		{	cont : 1,
			pat : 
				[0,1,0,1,0,
				 1,0,1,0,1,
				 0,1,0,1,0,
				 1,0,1,0,1,
				 0,1,0,1,0
		]},
		{	cont : 2,
			pat : 
				[1
		]},
		{	cont : 2,
			pat : 
				[0,0,0,0,0,
				 0,1,0,1,0,
				 0,0,0,0,0,
				 1,0,0,0,1,
				 0,1,1,1,0
		]},
		{	cont : 1,
			pat : 
				[1
		]},
		{	cont : 1,
			pat : 
				[1,1,1,1,1,
				 1,0,0,0,1,
				 1,0,1,0,1,
				 1,0,0,0,1,
				 1,1,1,1,1
		]},
		{	cont : 1,
			pat : 
				[1
		]},
		{	cont : 1,
			pat : 
				[0,0,0,0,0,
				 0,1,1,1,0,
				 0,1,0,1,0,
				 0,1,1,1,0,
				 0,0,0,0,0
		]},
		{	cont : 2,
			pat : 
				[1,0,0,0,1,
				 1,0,0,0,1,
				 1,1,1,1,1,
				 1,0,0,0,1,
				 1,0,0,0,1
		]},
		{	cont : 2,
			pat : 
				[1,1,1,1,1,
				 0,0,1,0,0,
				 0,0,1,0,0,
				 0,0,1,0,0,
				 0,0,1,0,0
		]},
		{	cont : 2,
			pat : 
				[1,0,0,0,1,
				 1,1,0,1,1,
				 1,0,1,0,1,
				 1,0,0,0,1,
				 1,0,0,0,1
		]},
		{	cont : 2,
			pat : 
				[1,0,0,0,0,
				 1,0,0,0,0,
				 1,0,0,0,0,
				 1,0,0,0,0,
				 1,1,1,1,1
		]},
		{	cont : 4,
			pat : 
				[1,1,1,1,1,
				 1,0,0,0,0,
				 1,1,1,1,0,
				 0,0,0,0,1,
				 1,1,1,1,0
		]},
		{	cont : 1,
			pat : 
				[0,0,0,0,0,
				 0,1,0,1,0,
				 0,0,0,0,0,
				 1,0,0,0,1,
				 0,1,1,1,0
		]},
		{	cont : 1,
			pat : 
				[1
		]},
		{	cont : 1,
			pat : 
				[1,1,1,1,1,
				 1,0,0,0,0,
				 1,1,1,1,0,
				 0,0,0,0,1,
				 1,1,1,1,0
		]},
		{	cont : 1,
			pat : 
				[1
		]},
		{	cont : 1,
			pat : 
				[0,0,0,0,0,
				 0,1,0,1,0,
				 0,0,0,0,0,
				 1,0,0,0,1,
				 0,1,1,1,0
		]},
		{	cont : 1,
			pat : 
				[1
		]},
		{	cont : 1,
			pat : 
				[1,1,1,1,1,
				 1,0,0,0,0,
				 1,1,1,1,0,
				 0,0,0,0,1,
				 1,1,1,1,0
		]},
		{	cont : 1,
			pat : 
				[1
		]}
	],
	ctx: null,
	num : 0,
	flag : true,

	clock : null,
	canvas : null,
	

	initialize : function(id, img_uris, senario) {
		if(senario == null) senario = this._senario;
		
		for(var i = 0; i < senario.length; i++) {
			for(var j = 0; j < senario[i].cont; j++) {
				this.senario.push(senario[i].pat);
			}
		}
		
		var that = this;
		if(this._initCanvas(id)){
			this._start(img_uris);
		} else {
			this._staticstart(img_uris);
		}
	},

	_initCanvas : function(id) {
		var ret = true;
		
		// get DOM inforations
		var content = document.getElementById(id);
		
		this.canvas = document.createElement('canvas');
		this.canvas.width = content.offsetWidth;
		this.canvas.height = content.offsetWidth;
		content.appendChild(this.canvas);
		
		if ( ! this.canvas || ! this.canvas.getContext ) {
		 	ret = false;
		 	content.removeChild(this.canvas);
		 	
		 	this.canvas = document.createElement('div');
		 	this.canvas.style.width = content.offsetWidth+'px';
		 	this.canvas.style.height = content.offsetWidth+'px';
		 	content.appendChild(this.canvas);
		} else {
			this.ctx = this.canvas.getContext('2d');
		}
		this.clock = document.createElement('div');
		this.clock.style.width = content.offsetWidth+'px';
		this.clock.style.height = '35px';
		this.clock.style.textAlign = 'center';
		this.clock.style.fontSize = '24pt';
		this.clock.style.paddingTop = '3px';
		this.clock.style.fontWeight = 'bold';
		this.clock.style.fontFamily = 'Arial,sans-serif';
		this.clock.style.color = '#001fff';

		content.appendChild(this.clock);
		
		return ret;
	},

	_start : function(img_uris) {
		var imgs = [];
		
		/* create image object */
		for ( var i = 0; i < img_uris.length; i++) {
			imgs[i] = new Image();
			imgs[i].src = img_uris[i]+"?" + new Date().getTime();

			var that = this;
			/* waiting for loaded. */
			
			var target = imgs[i];
			if(target.addEventListener){
				target.addEventListener("load", function(e){
					that._onLoadImg(e);
				}, false);
			}else if(target.attachEvent){
				target.attachEvent("onload", function(e){
					that._onLoadImg(e);
				});
			}
		}

	},


	
	_onLoadImg:function(e) {
		// push loaded image to this.imgs
		var elm = e.target || e.srcElement;
		
		this.imgs.push(elm);
		
		var flag = this.flag;
		this.flag = false;
		
		// if first-load start clock
		if(flag) {
			this.num = 0;
			var sec = this._getSeconds();
			this._draw(sec);
			
			var that = this;

			setInterval(function(){
				
				var sec = that._getSeconds();
				
				if((sec % 4) == 0) that.num = parseInt(that.imgs.length * Math.random());
				
				that._draw(sec);
				
			}, 1000);
		}
	},
	
	_staticstart : function(img_uris) {
		this.num = 0;
		var that = this;
		
		var _draw = function() {
			var wCvs = that.canvas.offsetWidth;
			var hCvs = that.canvas.offsetHeight;

			that.canvas.innerHTML = '';
			
			var img = document.createElement('img');
			img.src = img_uris[that.num];

			var dx = 0; var dy = 0;
			
			if(img.width > wCvs || img.height > hCvs) {
				if(img.width > img.height) {
					dx = wCvs;
					dy = img.height * ( dx / img.width);
				} else {
					dy = hCvs;
					dx = img.width * ( dy / img.height);
				}
				img.width = dx; img.height = dy;
			} else {
				dx = img.width; dy = img.height;
			}
			img.style.position = 'relative';
			img.style.top = (hCvs - dy) / 2 + 'px';
			img.style.left = (wCvs - dx) / 2 + 'px';
			
			that.canvas.appendChild(img);
			
			var text = document.createElement('div');
			text.style.position = 'absolute';
			text.style.zIndex = '100';
			text.style.top = '2px';
			text.style.left = '0px';
			text.style.fontWeight = 'bold';
			text.style.fontSize = '12pt';
			that.canvas.appendChild(text);
			text.innerHTML = 'We only dance with "canvas".';
		}
		_draw();
		
		setInterval(function() {
			var sec = that._getSeconds();

			if((sec % 4) == 0) {
				that.num = parseInt(img_uris.length * Math.random());
				_draw();
			}
		}, 1000);
	},

	cont : 0,
	senarioNum : 0,
	_draw : function(sec){

		this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

		var rad = sec * 6;
		
		var pattern = this.senario[sec % this.senario.length];

		var img = this.imgs[this.num];
		var k = parseInt(Math.sqrt(pattern.length));
		

		var wCvs = this.canvas.width / k;
		var hCvs = this.canvas.height / k;
		
		var inc = 0;
		
		for(_y = 0; _y < k; _y++) {
			for(_x = 0; _x < k; _x++) {
				var _dx = wCvs * _x;
				var _dy = hCvs * _y;
				if((pattern[inc] || 0) == 1) {
					this.ctx.save();
					this.ctx.translate((wCvs / 2) + _dx, (hCvs / 2) + _dy);
					this.ctx.rotate(rad / 180 * Math.PI);
					this.ctx.translate(-((wCvs / 2) + _dx), -((hCvs / 2) + _dy));
					
					if(img.width > wCvs || img.height > hCvs) {
						var dx = 0; var dy = 0;
						if(img.width > img.height) {
							dx = wCvs;
							dy = img.height * ( dx / img.width);
						} else {
							dy = hCvs;
							dx = img.width * ( dy / img.height);
						}
						this.ctx.drawImage(img, 0, 0, img.width, img.height, ((wCvs - dx) / 2) + _dx, ((hCvs - dy) / 2) + _dy, dx, dy);
						
					} else {
						var ix = (wCvs - img.width) / 2;
						var iy = (hCvs - img.height) / 2;
						this.ctx.drawImage(img, ix + _dx, iy + _dy);
					}
					this.ctx.restore();
				}
				inc += 1;
			}
		}
	},
	
	_getSeconds : function() {
		var now = new Date();
		
		if(this.clock) {
			var h = now.getHours();
			var m = now.getMinutes();
			var s = now.getSeconds();
			
			h = (h < 10 ? '0'+h : h.toString());
			m = (m < 10 ? '0'+m : m.toString());
			s = (s < 10 ? '0'+s : s.toString());
			
			this.clock.innerHTML = h+":"+m+":"+s;
		}
		
		return now.getSeconds();
	}
}

